<template>
    <div class="table">
        <div class="container">
          <el-row>
            <el-col :span="6" style="padding-left:10px;padding-right:10px">
              <el-card class="box-card" >
                <div slot="header" class="clearfix">
                    <span>个人信息</span>
                </div>
                <div>
                    <user-avatar/>
                    <ul class="user-info">
                        <li style="border-top:1px solid #e7eaec">
                            <div style="height: 100%"><i class="el-icon-lx-peoplefill"/> 登录账号 <div class="user-right">{{userName}}</div></div>
                        </li>
                        <li><i class="el-icon-lx-peoplefill"/> 用户昵称 <div class="user-right">{{user.name}}</div></li>
                        <li><i class="el-icon-lx-peoplefill"/> 所属部门 <div class="user-right">{{user.deptName}}</div></li>
                    </ul>
                </div>
                </el-card>
            </el-col>
            <el-col :span="18" style="padding-left:10px;padding-right:10px">
              <el-card class="box-card">
                <div >
                  <el-tabs v-model="activeName">
                    <el-tab-pane label="修改密码" name="resetPwd">
                      <reset-pwd/>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-card>
              
            </el-col>
          </el-row>
        </div>
    </div>
</template>
<script>
import dateUtils from '@/utils/dateUtils';
import formUtils from '@/utils/formUtils';
import UserAvatar from '@/components/page/sys/org/sys_org_person/comp/UserAvatar';
import ResetPwd from '@/components/page/sys/org/sys_org_person/comp/ResetPwd';
export default {
    name: "SysOrgPersonInfo",
    components: {
        UserAvatar,
        ResetPwd
    },
    data() {
        return {
            user:{
              name:'',
              deptName:''
            },
            activeName: 'resetPwd'
        }
    },
    created() {
      this.getUserInfo();
    },
    methods: {
      getUserInfo() {
        this.$fetch('/api/sys/org/sys_org_person/getUserInfo',{}).then((res) => {
            if(res.status ==1){
              this.user.name = res.data.fdName;
              this.user.deptName = res.data.fdParentName;
            }
        });
      }
    },
    computed:{
      userName(){
        let loginName = localStorage.getItem('userName');
        return loginName ;
      }
    },
}
</script>
<style scoped>
.box-card {
  height:420px;
}
.user-info{
    padding-left: 0;
    list-style: none;
  }
.user-info li {
    border-bottom: 1px solid #F0F3F4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-info li .user-right {
    float: right;
  }
  .user-info li .user-right a {
    color: #317EF3;
  }
</style>